<template>
<!-- 工作列表 -->
<div class="worklist">
    <div class="index-wrapper">
        <div class="Header-wrapper">
            <yd-navbar title="工作列表" fontsize="16px" color="#fff" height="45px" bgcolor="#ffd602">
                <router-link to="PersonalIndex" slot="left">
                    <i class="iconfont icon-back Fcolor"></i>
                </router-link>
            </yd-navbar>
        </div>
       <div class="list-wrapper" ref="wrapper">
         <transition appear enter-active-class="animated fadeIn" appear-active-class="animated fadeIn">
           <ul>
                <li v-for="item in listData" :key="item.id" class="list" @click='toDeliveryList(item.id)'>
                    <div class="list-box">
                        <div class="list-msg">
                            <h2>{{item.jobname}}</h2>
                            <p>{{item.actareaname}}</p>
                        </div>
                        <div class="list-icon">
                            <i class="iconfont icon-more"></i>
                        </div>
                    </div>
                </li>
            </ul>
            </transition>
       </div>
      <v-nav></v-nav>
    </div>
</div>
</template>
<script>
import Nav from '@/components/public/nav'
import BScroll from 'better-scroll'
import apis from '../../../../../static/js/apis.js'
export default {
  data () {
    return {
      Listid: '',
      listData: []
    }
  },
  methods: {
    toDeliveryList (id) {
      this.$router.push({
        path: '/personal/DeliveryList',
        query: {
          Listid: id
        }
      })
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.wrapper, {
        click: true,
        taps: true
      })
    })
  },
  created () {
    this.$axios
      .post(
        apis + '/app/jobinfoapp/userlist',
        this.confusion(
          JSON.stringify({
            rectype: '1'
          })
        ),
        {
          headers: {
            Authorization: 'Bearer ' + JSON.parse(window.localStorage.getItem('userInfo')).token,
            'Content-Type': 'application/json;charset=UTF-8',
            'Cache-Control': 'no-cache',
            isApp: 'isApp'
          }
        }
      )
      .then(response => {
        this.listData = response.data
        // console.log(this.listData)
      })
      .catch(error => {
        console.log(error)
        this.$dialog.toast({
          mes: '服务器异常'
        })
      })
  },
  components: {
    'v-nav': Nav,
    apis
  }
}
</script>
<style scoped>
.icon-back {
  font-size: 24px;
}
.Fcolor {
  color: #fff;
}
.list-time .Xcolor {
  color: red;
}
.release-right {
  font-size: 12px;
  color: #fff;
}
.list-wrapper {
  overflow: hidden;
  /* width: 100%; */
  position: fixed;
  top: 45px;
  bottom: 50px;
  width: 100%;
}
.list-box {
  padding: 0 12px;
  /* overflow: hidden; */
  box-sizing: border-box;
  display: flex;
  /* width: 100%; */
}
.list-msg {
  flex: 5;
  overflow: hidden;
}
.list-msg h2 {
  font-size: 14px;
  color: #333;
  margin-bottom: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-msg p {
  font-size: 12px;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-time {
  flex: 4;
  /* overflow: hidden; */
}
.list-time span {
  display: block;
  line-height: 12px;
  color: #666;
  text-align: right;
  height: 20px;
}
.list-icon {
  flex: 1;
  overflow: hidden;
  text-align: right;
  padding-top: 3%;
}
.list {
  /* overflow: hidden; */
  padding: 10px 0;
  box-sizing: border-box;
  width: 100%;
  background: #fff;
  border-bottom: 1px #dfdfdf solid;
}
</style>
